<template>
  <div v-if="tableLoad">
    <div style="padding-bottom: 15px" v-if="!settings.toolbar || settings.searchLocationTop">
      <query-search
          ref="search"
          :settings="querySettings"
          :query="query"
          @reload="reload">
        <template v-for="name in searchSlot">
          <template :slot="name">
            <slot :name="name"></slot>
          </template>
        </template>
      </query-search>
    </div>
    <ele-pro-table
        ref="table"
        method="get"
        :where="query"
        :row-key="rowKey"
        :datasource="url"
        :stripe="settings.stripe"
        :columns="columns"
        :page-size="settings.pageSize"
        @columns-change="onColumnChange"
        @sort-change="sort"
        @selection-change="(selection) => {$emit('update:selection', selection)}"
        @row-click="(row, column, event) => {$emit('row-click', row, column, event)}"
        :parse-data="(res) => {$emit('parse-data', res); return res;}"
        :toolbar="settings.toolbar"
        :layout="settings.layout"
        :need-page="settings.needPage"
        :hide-on-single-page="settings.hideOnSinglePage"
        :init-load="settings.initLoad">
      <template slot="toolbar">
        <query-search
            ref="search"
            :settings="querySettings"
            :query="query"
            @reload="reload"
            v-if="settings.toolbar && !settings.searchLocationTop">
          <template v-for="name in searchSlot">
            <template :slot="name">
              <slot :name="name"></slot>
            </template>
          </template>
        </query-search>
        <slot name="toolbar"></slot>
      </template>
      <template slot="toolkit">
        <slot name="toolkit"></slot>
      </template>
      <template
          v-for="name in slot"
          :slot="name"
          slot-scope="{ row, column, $index }"
      >
        <slot
            :name="name"
            v-bind:row="row"
            v-bind:column="column"
            v-bind:$index="$index"
        />
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
import QuerySearch from '@/components/query-search'

export default {
  name: 'table-list',
  props: {
    // 请求地址
    url: {
      type: [Array, String],
      default: ''
    },
    // 表格列定义
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表格配置
    setting: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表格KEY
    rowKey: {
      type: String,
      default: 'ID'
    },
    // 条件配置
    querySettings: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data () {
    return {
      slot: [],
      query: {},
      tableLoad: false,
      settings: {},
      queryField: [],
      searchSlot: ['button-before', 'button-after']
    }
  },
  mounted () {
    this.loadTableSetting()
    this.loadQuerySetting()
    this.$nextTick(() => {
      this.tableLoad = true
    })
    this.loadColumnSlot()
  },
  components: {
    QuerySearch
  },
  methods: {
    loadTableSetting () {
      this.settings = {
        pageSize: 'pageSize' in this.setting ? this.setting.pageSize : 10, // 每页显示数量
        initLoad: 'initLoad' in this.setting ? this.setting.initLoad : true, // 如果是服务端数据源默认是否请求数据
        toolbar: 'toolbar' in this.setting ? this.setting.toolbar : true, // 是否显示表头工具栏
        layout: 'layout' in this.setting ? this.setting.layout : 'total, sizes, prev, pager, next, jumper', // 分页组件布局，子组件名用逗号分隔
        hideOnSinglePage: 'hideOnSinglePage' in this.setting ? this.setting.hideOnSinglePage : false, // 分页组件只有一页时是否隐藏
        searchLocationTop: 'searchLocationTop' in this.setting ? this.setting.searchLocationTop : false, // 搜索框位置
        needPage: 'needPage' in this.setting ? this.setting.needPage : true, // 是否显示分页
        stripe: 'stripe' in this.setting ? this.setting.stripe : false, // 是否斑马线
      }
    },
    loadQuerySetting () {
      this.querySettings.forEach(item => {
        if ('default' in item && item.default !== false) {
          this.query[item.field] = item.default
        } else if (item.type === 'change') {
          this.query[item.field] = ''
        } else if (item.type === 'slot' && item.slotName) {
          this.searchSlot.push(item.slotName)
        }
      })
    },
    // 排序
    sort (res) {
      if (!res.order) {
        delete this.query.OrderField
        delete this.query.OrderType
      } else {
        this.query.OrderField = res.prop
        this.query.OrderType = res.order.replace('ending', '')
      }
      this.reload()
    },
    /**
     * 刷新表格
     * @param query 查询条件
     * @param isMerge  是否合并 query-search 内的条件，用于外部传参
     */
    reload (query = false, isMerge = false) {
      this.$emit('update:where', query)
      if (query === false) {
        isMerge = true
      }
      let where = Object.assign({}, this.query, (query ? query : {}))
      this.$nextTick(() => {
        if (isMerge) {
          where = Object.assign({}, where, this.$refs.search.getQuery())
        }
        this.$refs.table.reload({ where: where })
      })
    },
    loadColumnSlot () {
      let slot = []
      this.columns.forEach(item => {
        if (item.slot) {
          slot.push(item.slot)
        }
        if (item.headerSlot) {
          slot.push(item.headerSlot)
        }
      })
      this.slot = slot
    },
    setQuery (field, value) {
      this.$refs.search.setQuery(field, value)
    },
    getQuery () {
      return this.$refs.search.getQuery()
    },
    reloadSearchForm (query = {}) {
      this.loadQuerySetting()
      return this.$refs.search.reloadSearchForm(query)
    },
    clearSelection () {
      this.$refs.table.clearSelection()
    },
    toggleRowSelection (row, selected = true) {
      this.$refs.table.toggleRowSelection(row, selected)
    },
    onColumnChange () {
      this.loadColumnSlot()
    }
  }
}
</script>

<style scoped>

</style>
